<template>
  <div class="orderCopy flex-space-between">
    <div>{{copyTitle}}</div>
    <div>
      <span>{{copyText}}</span>
      <button type="button" class="btn"
              v-clipboard:copy="copyText"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError">
        {{copyDes}}
      </button>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        copyUrl:'http://baidu.com'
      };
    },
    props:{
      // 复制头
      copyTitle:{},
      // 复制内容
      copyText:{

      },
      // 描述
      copyDes:{

      }
    },
    methods: {
      onCopy(e) {
        console.log("复制成功")
        this.$emit("onCopy")
      },
      onError(e) {
        console.log("复制失败")
        this.$emit("onError")
      }
    }
  };
</script>
<style lang="less" scoped>
  @import (reference) url(../assets/less/common);
  .orderCopy{
    width:100%;
    font-size: @fontSize34;
    font-family: @fontFamily600;
    font-weight: @fontWeight400;
    color:#FFFFFF;
    span{
      font-size: @fontSize34;
      font-family: @fontFamily500;
      font-weight: @fontWeight400;
      color:@color999;
    }
    button{
      width: 0.8rem;
      height:0.4rem;
      border-radius: 0.05rem;
      background:#FD0000;
      font-size: @fontSize24;
      font-family: @fontFamily500;
      font-weight: @fontWeight400;
      color:#ffffff;
      margin-left:0.16rem;

    }
  }
</style>
